<script setup lang="ts">
import type { PropType } from 'vue'
import type { Tab } from '../../use-tabs'

defineProps({
  data: { type: Object as PropType<Tab>, required: true },
  closeable: { type: Boolean, default: true }
})
const emit = defineEmits(['close'])
</script>

<template>
  <div class="tab">
    <span>
      <span v-if="data.loading"></span>
      <img v-if="data.favicon" class="tab__favicon" :class="{ loading: data.loading }" :src="data.favicon" alt="favicon" />
      <i v-else class="tab__favicon iconfont icon-Website" :class="{ loading: data.loading }"></i>
    </span>
    <span class="tab__name">{{ data.title }}</span>
    <span v-if="closeable" class="tab__close" @click.stop="emit('close')">
      <i class="tab__close__icon iconfont icon-cha"></i>
    </span>
  </div>
</template>

<style scoped>
.tab {
  box-sizing: border-box;
  width: 0;
  max-width: 200px;
  height: 26px;
  flex-shrink: 1;
  flex-grow: 1;
  border-radius: 10px;
  padding: var(--spacing-xs) var(--spacing-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  line-height: var(--font-size-xs);
}
.tab.active {
  background: var(--bg-color-base) !important;
}
.tab:hover {
  background: var(--color-gray-5);
}
.tab__favicon, .tab__close {
  flex-shrink: 0;
}
.tab__favicon {
  width: 16px;
  height: 16px;
  font-size: 14px;
}
.tab__favicon.loading {
  width: 16px;
  height: 16px;
  font-size: 14px;
}
.tab__name {
  flex-grow: 1;
  font-size: var(--font-size-xs);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}
.tab__close {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
}
.tab__close:hover {
  background: var(--color-gray-6);
  cursor: pointer;
}
.tab__close__icon {
  font-size: var(--font-size-xs);
}
</style>